<template>
    <div class="father">
        <div class="content">
            <!-- 1、参数是变量时绑定:。是string不需要: -->
            <!-- 2、v-slot只能卸载组件或者<template></template>上 -->
            <classify> 
                <template v-slot:content>
                    <ul>
                        <li v-for="item in alternates" :key="item.id">
                            {{item.title}}
                        </li>
                    </ul>
                </template>

                <template v-slot:title>
                    <h1>劳逸结合</h1>
                </template>
            </classify>

            <classify >
                <template v-slot:content>
                    <img :src="foodUrl" alt="" style="width: 100%;height: 100%">
                </template>
                <template v-slot:title>
                    <h1>美食图片</h1>
                </template>
            </classify>

            <classify>
                <template #content>
                    <video :src="videoUrl" controls style="width: 100%;height: 100%"></video>
                </template>
                <template #title>
                    <h1>自身价值</h1>
                </template>
            </classify>
        </div>
    </div>
</template>
<script setup lang="ts">
import {ref, reactive} from 'vue'

let alternates = reactive([
    {id:"1",title:"watch douyin"},
    {id:"2",title:"take a walk"},
    {id:"3",title:"chat"},
    {id:"4",title:"daydream"},
])

let foodUrl = "https://z1.ax1x.com/2023/11/19/piNxLo4.jpg";

let videoUrl = ref("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4");

import classify from './classify.vue';
</script>
<style scoped>
.father{
    /* padding: 50px; */
    width: 100vw;
    height: 100vh;
    background-color: rgb(240, 243, 55);
}
.content{
    display: flex;
}
h1{
    background-color: rgb(175, 43, 227);
    text-align: center;
    font-size: 25px;
}
</style>
